<template>
  <div style="height: 100vh; width: 100%">
    <div
      style="
        width: 100%;
        height: 340px;
        background-image: linear-gradient(#e1deff, #f5f5f5);
        position: absolute;
        z-index: -100;
      "></div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        width: 74px;
        height: 28px;
        background-color: rgba(245, 245, 245, 0.5);
        float: right;
        margin-top: 20px;
        margin-right: 16px;
        border-radius: 8px;
      "
      @click="closePopFangan">
      <van-icon name="arrow-left"></van-icon>
      <span style="margin-left: 10px; color: #666666">返回</span>
    </div>
    <div
      style="
        display: flex;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding: 16px;
      ">
      <div
        style="
          width: 100%;
          border-radius: 8px 8px 8px 8px;
          height: 53px;
          background: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 8px;
        ">
        <div
          :style="{
            background: FanganStyle.background1,
            color: FanganStyle.color1,
            width: '50%',
            height: '37px',
            'border-radius': '6px 6px 6px 6px',
            display: 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'font-weight': 'bold',
            'font-size': '16px',
            'letter-spacing': '2px',
          }"
          @click="swhFangan(1)">
          系统方案
        </div>
        <div
          :style="{
            background: FanganStyle.background2,
            color: FanganStyle.color2,
            width: '50%',
            height: '37px',
            'border-radius': '6px 6px 6px 6px',
            display: 'flex',
            'justify-content': 'center',
            'align-items': 'center',
            'font-weight': 'bold',
            'font-size': '16px',
            'letter-spacing': '2px',
          }"
          @click="swhFangan(2)">
          教练方案
        </div>
      </div>
      <div v-if="FlagFangan === 1" style="width: 100%">
        <keeper-consumer-scheme
          v-if="consumerObj && consumerObj.id > 0"
          :key="keyForScheme"
          :cid="consumerObj.id"></keeper-consumer-scheme>
        <van-loading v-else color="#1989fa" vertical style="align-items: center; margin: auto">加载中...</van-loading>
      </div>
      <div v-else-if="FlagFangan === 2" style="width: 100%">
        <!-- 美学 -->
        <div
          style="
            width: 100%;
            border-radius: 8px 8px 8px 8px;
            height: 160px;
            background: #ffffff;
            padding: 12px;
            margin: 12px 0;
          ">
          <div
            style="
              width: 100%;
              height: 32px;
              background: #fff9f5;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #ff9140;
              letter-spacing: 2px;
            ">
            美学与专业
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              width: 100%;
              margin-top: 12px;
            ">
            <div
              style="width: 161px; height: 94px; background: rgba(106, 168, 255, 0.1); border-radius: 4px 4px 4px 4px">
              <div
                style="
                  width: 36px;
                  height: 17px;
                  background: #3d8dff;
                  border-radius: 4px 0px 4px 0px;
                  font-weight: 400;
                  font-size: 12px;
                  color: #ffffff;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                好
              </div>
              <div style="font-weight: 600; font-size: 12px; color: #3d8dff; padding: 8px">
                {{ clkFanganObj.mxxq1 }}
              </div>
            </div>
            <div
              style="width: 161px; height: 94px; background: rgba(255, 106, 106, 0.1); border-radius: 4px 4px 4px 4px">
              <div
                style="
                  width: 36px;
                  height: 17px;
                  background: #ff5555;
                  border-radius: 4px 0px 4px 0px;
                  font-weight: 400;
                  font-size: 12px;
                  color: #ffffff;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                差
              </div>
              <div style="font-weight: 600; font-size: 12px; color: #ff5555; padding: 8px">
                {{ clkFanganObj.mxxq2 }}
              </div>
            </div>
          </div>
        </div>
        <!-- 相学 -->
        <div style="width: 100%; border-radius: 8px 8px 8px 8px; background: #ffffff; padding: 12px; margin: 12px 0">
          <div
            style="
              width: 100%;
              height: 32px;
              background: #f5f9ff;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 12px;
              color: #3d8dff;
              letter-spacing: 2px;
            ">
            法相与人道
          </div>
          <div style="width: 100%; text-align: center">
            <img :src="cimgurl" alt="" width="220px" />
          </div>
          <div style="display: flex; justify-content: space-between; align-items: flex-start; width: 100%">
            <div style="width: 161px; background: rgba(106, 168, 255, 0.1); border-radius: 4px 4px 4px 4px">
              <div
                style="
                  width: 36px;
                  height: 17px;
                  background: #3d8dff;
                  border-radius: 4px 0px 4px 0px;
                  font-weight: 400;
                  font-size: 12px;
                  color: #ffffff;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                好
              </div>
              <div style="padding: 8px">
                <div v-for="(item, index) in fanganXx1" :key="index">
                  <div style="font-weight: 600; font-size: 12px; color: #3d8dff">{{ item.split('$$')[0] }}</div>
                  <div style="font-weight: 400; font-size: 12px; color: #666666">{{ item.split('$$')[1] }}</div>
                </div>
              </div>
            </div>
            <div style="width: 161px; background: rgba(255, 106, 106, 0.1); border-radius: 4px 4px 4px 4px">
              <div
                style="
                  width: 36px;
                  height: 17px;
                  background: #ff5555;
                  border-radius: 4px 0px 4px 0px;
                  font-weight: 400;
                  font-size: 12px;
                  color: #ffffff;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                差
              </div>
              <div style="padding: 8px">
                <div v-for="(item, index) in fanganXx2" :key="index">
                  <div style="font-weight: 600; font-size: 12px; color: #ff5555">{{ item.split('$$')[0] }}</div>
                  <div style="font-weight: 400; font-size: 12px; color: #666666">{{ item.split('$$')[1] }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 信任方案 -->
        <div style="width: 100%; border-radius: 8px 8px 8px 8px; background: #ffffff; padding: 12px; margin: 12px 0">
          <div
            style="
              width: 100%;
              height: 32px;
              background: #f6f5ff;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #766aff;
              letter-spacing: 2px;
            ">
            信任方案
          </div>
          <div v-for="(item, index) in fanganXrfa" :key="index" style="margin-top: 12px; display: flex">
            <div
              style="
                width: 15px;
                height: 15px;
                background: #f1f0ff;
                border-radius: 2px 2px 2px 2px;
                margin-right: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 10px;
                color: #766aff;
              ">
              {{ index + 1 }}
            </div>
            <div>{{ item }}</div>
          </div>
          <div v-for="(item, index) in fanganXrfa2" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <audio :src="getClerkImgUri(item)" controls></audio>
            </div>
          </div>
          <div v-for="(item, index) in fanganXrfa1" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <img :src="getClerkImgUri(item)" style="border: none; width: 100%" />
            </div>
          </div>
        </div>
      </div>
      <div v-else style="width: 100%">
        <div style="width: 100%; border-radius: 8px 8px 8px 8px; background: #ffffff; padding: 12px; margin: 12px 0">
          <div
            style="
              width: 100%;
              height: 32px;
              background: #f6f5ff;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #766aff;
            ">
            流量方案
          </div>
          <div v-for="(item, index) in fanganLlfa" :key="index" style="margin-top: 12px; display: flex">
            <div
              style="
                width: 15px;
                height: 15px;
                background: #f1f0ff;
                border-radius: 2px 2px 2px 2px;
                margin-right: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 10px;
                color: #766aff;
              ">
              {{ index + 1 }}
            </div>
            <div>{{ item }}</div>
          </div>
          <div v-for="(item, index) in fanganLlfa2" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <audio :src="getClerkImgUri(item)" controls></audio>
            </div>
          </div>
          <div v-for="(item, index) in fanganLlfa1" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <img :src="getClerkImgUri(item)" style="border: none; width: 100%" />
            </div>
          </div>
        </div>
        <div style="width: 100%; border-radius: 8px 8px 8px 8px; background: #ffffff; padding: 12px; margin: 12px 0">
          <div
            style="
              width: 100%;
              height: 32px;
              background: #f6f5ff;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 14px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #766aff;
            ">
            成交方案
          </div>
          <div v-for="(item, index) in fanganCjfa" :key="index" style="margin-top: 12px; display: flex">
            <div
              style="
                width: 15px;
                height: 15px;
                background: #f1f0ff;
                border-radius: 2px 2px 2px 2px;
                margin-right: 3px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 10px;
                color: #766aff;
              ">
              {{ index + 1 }}
            </div>
            <div>{{ item }}</div>
          </div>
          <div v-for="(item, index) in fanganCjfa2" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <audio :src="getClerkImgUri(item)" controls></audio>
            </div>
          </div>
          <div v-for="(item, index) in fanganCjfa1" :key="index" style="margin-top: 12px">
            <div style="width: 100%; text-align: center">
              <img :src="getClerkImgUri(item)" style="border: none; width: 100%" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import { getFanganByCid } from '@/api/ym';
import WebConst from '@/utils/const/web-const';
import { Notify } from 'vant';
import KeeperConsumerScheme from './scheme.vue';

export default {
  name: 'ConsumerFangan',
  components: {
    ['keeper-consumer-scheme']: KeeperConsumerScheme,
  },
  props: {
    baseFangan: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      keyForScheme: 0,
      FlagFangan: 1,
      consumerObj: {},
      clkFanganObj: {
        bb1: '',
        bb2: '',
        bb3: '',
        bb4: '',
        bb5: '',
        bb6: '',
        bb7: '',
        bb8: '',
        bb9: '',
        bb10: '',
        bb11: '',
        bb12: '',
        bb13: '',
        rdxq: '',
        rdxq1: '',
        rdxq2: '',
        xrfa: '',
        xrfa1: '',
        xrfa2: '',
        llfa: '',
        llfa1: '',
        llfa2: '',
        xxxq1: '',
        xxxq2: '',
        mxxq1: '',
        mxxq2: '',
        mark: 0,
      },
      FanganStyle: {
        background1: '#ECEBFF',
        color1: '#766AFF',
        background2: '#fff',
        color2: '#999999',
        background3: '#fff',
        color3: '#999999',
      },
      cimgurl: '',
    };
  },
  computed: {
    fanganXx1() {
      if (this.clkFanganObj.xxxq1 && this.clkFanganObj.xxxq1.length > 2) {
        return [...this.clkFanganObj.xxxq1.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganXx2() {
      if (this.clkFanganObj.xxxq2 && this.clkFanganObj.xxxq2.length > 2) {
        return [...this.clkFanganObj.xxxq2.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganRdxq() {
      if (this.clkFanganObj.rdxq && this.clkFanganObj.rdxq.length > 2) {
        return [...this.clkFanganObj.rdxq.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganRdxq1() {
      if (this.clkFanganObj.rdxq1 && this.clkFanganObj.rdxq1.length > 2) {
        const lst = [...this.clkFanganObj.rdxq1.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganRdxq2() {
      if (this.clkFanganObj.rdxq2 && this.clkFanganObj.rdxq2.length > 2) {
        const lst = [...this.clkFanganObj.rdxq2.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganXrfa() {
      if (this.clkFanganObj.xrfa && this.clkFanganObj.xrfa.length > 2) {
        return [...this.clkFanganObj.xrfa.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganXrfa1() {
      if (this.clkFanganObj.xrfa1 && this.clkFanganObj.xrfa1.length > 2) {
        const lst = [...this.clkFanganObj.xrfa1.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganXrfa2() {
      if (this.clkFanganObj.xrfa2 && this.clkFanganObj.xrfa2.length > 2) {
        const lst = [...this.clkFanganObj.xrfa2.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganLlfa() {
      if (this.clkFanganObj.llfa && this.clkFanganObj.llfa.length > 2) {
        return [...this.clkFanganObj.llfa.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganLlfa1() {
      if (this.clkFanganObj.llfa1 && this.clkFanganObj.llfa1.length > 2) {
        const lst = [...this.clkFanganObj.llfa1.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganLlfa2() {
      if (this.clkFanganObj.llfa2 && this.clkFanganObj.llfa2.length > 2) {
        const lst = [...this.clkFanganObj.llfa2.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganCjfa() {
      if (this.clkFanganObj.cjfa && this.clkFanganObj.cjfa.length > 2) {
        return [...this.clkFanganObj.cjfa.slice(0, -2).split('; ')].reverse();
      }
      return [];
    },
    fanganCjfa1() {
      if (this.clkFanganObj.cjfa1 && this.clkFanganObj.cjfa1.length > 2) {
        const lst = [...this.clkFanganObj.cjfa1.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
    fanganCjfa2() {
      if (this.clkFanganObj.cjfa2 && this.clkFanganObj.cjfa2.length > 2) {
        const lst = [...this.clkFanganObj.cjfa2.slice(0, -2).split('; ')].reverse();
        const reval = [];
        lst.forEach(i => {
          const bs = this.baseFangan.find(b => b.item === i);
          if (bs != null && bs.url && bs.url.length > 0) {
            reval.push(bs.url);
          }
        });
        return reval;
      }
      return [];
    },
  },
  methods: {
    getClerkImgUri(filename) {
      return WebConst.getClerkImageUriByName(filename);
    },
    closePopFangan() {
      this.$emit('close');
    },
    swhFangan(val) {
      this.FlagFangan = val;
      switch (val) {
        case 1:
          this.FanganStyle.background1 = '#ECEBFF';
          this.FanganStyle.color1 = '#766AFF';
          this.FanganStyle.background2 = '#fff';
          this.FanganStyle.color2 = '#999999';
          break;
        case 2:
          this.FanganStyle.background1 = '#fff';
          this.FanganStyle.color1 = '#999999';
          this.FanganStyle.background2 = '#ECEBFF';
          this.FanganStyle.color2 = '#766AFF';
          break;
      }
    },
    getConsumerFangan: async function (item) {
      this.clkFanganObj.id = 0;
      item.fmk = 0;
      this.consumerObj = Object.assign({}, item);
      this.cimgurl = '';
      if (this.consumerObj.pic && this.consumerObj.pic.length > 0) {
        this.cimgurl = this.consumerObj.pic[0].url;
      }
      const errAlertMsg = '获取方案失败';
      getFanganByCid(item.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          this.clkFanganObj = Object.assign({}, res.data.data);
          this.swhFangan(1);
          this.keyForScheme += 1;
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
  },
};
</script>

<style scoped></style>
